<template>
  <div class="w-full h-full">
    <n-layout position="absolute">
      <n-layout-header bordered class="h-16 flex items-center p-6">
        <h3>物资管理系统管理端</h3>
        <div class="mx-auto"></div>
        <n-dropdown trigger="click" :options="options" @select="handleSelect">
          <n-button type="primary">
            <template #icon>
              <n-icon>
                <AccountCircleRound />
              </n-icon>
            </template>
            Admin</n-button
          >
        </n-dropdown>
      </n-layout-header>
      <n-layout class="h-[calc(100%-128px)]" has-sider>
        <n-layout-sider bordered class="h-full w-64">
          <n-menu :options="menus" v-model:value="activeKey" :accordion="true"></n-menu>
        </n-layout-sider>
        <n-layout-content content-style="padding: 24px;">
          <RouterView />
        </n-layout-content>
      </n-layout>
      <n-layout-footer class="h-16 flex justify-center items-center">
        &copy; 2023-{{ new Date().getFullYear() }} 广西城市职业大学机械协会
      </n-layout-footer>
    </n-layout>
  </div>
</template>
<script setup lang="ts">
import {
  NLayout,
  NButton,
  NLayoutHeader,
  NLayoutFooter,
  NLayoutSider,
  NLayoutContent,
  NDropdown,
  NMenu,
  NIcon,
  useMessage
} from 'naive-ui'
import type { MenuOption, DropdownOption } from 'naive-ui'
import { ref, onMounted, h, watch } from 'vue'
import { getRoutes } from '@/router'
import { useRoute, RouterLink } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { AccountCircleRound } from '@vicons/material'

window.$message = useMessage()

const { Logout } = useUserStore()

const options: DropdownOption[] = [
  {
    label: '个人中心',
    key: 'user-center'
  },
  {
    label: '安全设置',
    key: 'setting'
  },
  {
    type: 'divider',
    key: 'divider'
  },
  {
    label: '退出',
    key: 'logout'
  }
]

const activeKey = ref<string>('dashboard')
const route = useRoute()
watch(
  () => route.name,
  (val) => {
    activeKey.value = val as string
  }
)
const menus = ref<MenuOption[]>([])
onMounted(async () => {
  const routers = getRoutes()
  routers.forEach((item) => {
    if (item.meta.hidden) return
    const menuItem = {
      label: () =>
        h(
          RouterLink,
          {
            to: {
              name: item.name
            }
          },
          {
            default: () => item.meta.title
          }
        ),
      key: item.name,

      children: []
    }
    if (item.children && item.children.length > 0) {
      menuItem.children = []
      item.children.forEach((child) => {
        if (!child.meta.hidden) {
          menuItem?.children?.push({
            label: () =>
              h(
                RouterLink,
                {
                  to: {
                    name: child.name
                  }
                },
                {
                  default: () => child.meta.title
                }
              ),
            key: child.name
          })
        }
      })
    }
    menus.value.push(menuItem)
    activeKey.value = route.name as string
  })
})

function handleSelect(key: string | number) {
  switch (key) {
    case 'logout':
      Logout()

      window.$message.success('退出成功')
      break
    default:
      break
  }
}
</script>
